<template>
  <div id="manage">
    <el-container class="container">

      <el-header class="header">
        <div class="logoImg"><img src="/static/images/logo1.png" alt="三维影像报告查询系统"></div>
        <div class="btns">
          <el-button type="text" icon="el-icon-user" @click="" style="padding:0" v-if="userInfo.name">{{userInfo.name}}</el-button>
          <el-button type="text" icon="el-icon-switch-button" @click="exitSys" style="padding:0">退出</el-button>
        </div>
      </el-header>
      <el-container class="mainContainer">
        <el-aside class="aside" width="220px">
          <Menu menuType="leftMenu" />
        </el-aside>
        <el-main class="main">
          <div class="breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item v-for="(a,b) in getBreadcrumb" :key="b"><i v-if="a.icon" class="icon" :class="a.icon"></i>{{a.name}}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="mainBox">
            <router-view/>
          </div>
        </el-main>
      </el-container>
      </el-container>
  </div>
</template>

<script>
import Menu from './component/menu.vue'
import {mapMutations,mapGetters} from "vuex";
export default {
  components: {
    Menu
  },
  // provide () {
  //   return {
  //     vMain: this
  //   }
  // },
  data() {
    return {
      userInfo:{}
    };
  },
  computed:{
    ...mapGetters('user', ['getUserInfo']),
    getBreadcrumb () {
      return this.$route.matched.map(a => {
        return {
          icon: a.meta.icon,
          name: a.meta.name,
          routeName: a.name
        }
      })
    },
  },
  created() {
  },
  mounted() {
    this.userInfo = this.getUserInfo;
  },
  methods:{
    ...mapMutations('user', ['OUT_SYS']),
    exitSys () {
      this.OUT_SYS()
      this.$router.replace({path: '/'})
    }
  },
  beforeDestroy() {
  },
}
</script>

<style lang="less">
@import "./manage.less";
</style>
